<template>
  <el-cascader
    separator="-"
    :value="value"
    :options="list"
    :props="{ label: 'name', value: 'id' }"
    @change="onSelect"
  />
</template>

<script>
import { getDepartmentAPI } from '@/api/department'
import { arrayToTree } from '@/utils'

export default {
  props: {
    // 2. 定义props.value去接收
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      list: []
    }
  },
  async created() {
    const res = await getDepartmentAPI()

    console.log('arrayToTree(res)  ----->  ', arrayToTree(res))
    this.list = arrayToTree(res)
  },

  methods: {
    onSelect(val) {
      // 触发父组件的change事件
      this.$emit('input', val[val.length - 1])
    }
  }
}
</script>
